//实例化对象
var myCharts=echarts.init(document.querySelector('.line-one .chart'));
var  option = {

    tooltip: {
        trigger: 'axis',
    },
    title:{
        text:"(mg/m3)",
        top:16,
        left:'1.5%',
        textStyle:{
            fontSize:12,
            color:"rgba(255,255,255,0.6)"
        }
    },
    legend: {
        data: ['车辆违规', '设备故障','空气质量'],
		icon: "circle",
        top:10,
		right:20,
        itemGap:80,
        textStyle:{
        	color:"rgba(255, 255, 255, 1)",
        	fontSize:"14",
        },
		
    },
    grid: {
    	top:"15%",
        left: '1.5%',
        right: '5%',
        bottom: '10%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: ["03-11","03-12","03-13","03-14","03-15","03-16","03-17"],
            axisLabel:{
				interval:0,
            	textStyle:{
            		color:"rgba(125, 166, 239, 1)",
            		fontSize:12
            	}
            },
			
            axisLine:{
            	//去除轴线
            	show:false
            },
            axisTick:{//坐标轴刻度相关设置。
            	show: false,
            },
            splitLine: { //坐标轴在 grid 区域中的分隔线。
            	show: false,
            },
        }
    ],
    yAxis: [
        {
            type: 'value',
            //不显示刻度标签
            axisTick:{
            	show:false
            },
			boundaryGap: ['20%', '20%'],
            axisLine:{
				show:false
			},
            axisLabel:{
            	textStyle:{
            		color:"rgba(125, 166, 239, 1)",
            		fontSize:12
            	}
            },
            //修改分割线颜色
            splitLine:{
            	lineStyle:{
            		color:"rgba(30, 57, 135, 0.5)"
            	},
				show:true
            }
        }
    ],
    series: [
        {
            name: '车辆违规',
            type: 'line',
            // smooth:true,
            lineStyle:{
            	color:"rgba(20, 179, 254, 1)",
            	width:2
            },
            //填充颜色设置
            areaStyle: {
            	color:new echarts.graphic.LinearGradient(
            		0,
            		0,
            		0,
            		1,
            		[
            		{
            			offset:0,
            			color:"rgba(64, 69, 237, 1)"//渐变色的起始颜色
            		},
            		{
            			offset:0.8,
            			color:"rgba(11, 101, 254, 0.47)"//渐变色的结束颜色
            		}
            		],
            		false
            	),
            	shadowColor:"rgba(0,0,0,0.1)"
            },
            //设置拐点
            symbol:'circle',
            //设置拐点大小
            symbolSize:5,
            //开始不显示拐点，鼠标经过再显示
            showSymbol:false,
            //设置拐点颜色以及边框
            itemStyle:{
            	color:"rgba(0, 129, 255, 1)",
            	borderColor:"rgba(221,220,107,0.1)",
            	borderWidth:12
            },
            data: [0.18,0.14,0.7,0.16,0.13,0.08,0.09],
            smooth:true
        },
        {
            name: '设备故障',
            type: 'line',
            // smooth:true,
            //单独修改当前线条的颜色
            lineStyle:{
            	color:"rgba(189, 64, 241, 1)",
            	width:2
            },
            //填充颜色设置
            areaStyle: {
            	color:new echarts.graphic.LinearGradient(
            		0,
            		0,
            		0,
            		1,
            		[
            		{
            			offset:0,
            			color:"rgba(232, 84, 255, 1)"//渐变色的起始颜色
            		},
            		{
            			offset:0.8,
            			color:"rgba(81, 6, 107, 0.5)"//渐变色的结束颜色
            		}
            		],
            		false
            	),
            	shadowColor:"rgba(0,0,0,0.1)"
            },
            //设置拐点
            symbol:'circle',
            //设置拐点大小
            symbolSize:7,
            //开始不显示拐点，鼠标经过再显示
            showSymbol:false,
            //设置拐点颜色以及边框
            itemStyle:{
            	color:"rgba(189, 64, 241, 1)",
            	borderColor:"rgba(189, 64, 241, 1)",
            	borderWidth:12
            },
           data: [0.03,0.08,0.09,0.12,0.18,0.04,0.07],
           smooth:true
        },
       {
           name: '空气质量',
           type: 'line',
           // smooth:true,
           //单独修改当前线条的颜色
           lineStyle:{
           	color:"#0184d5",
           	width:2
           },
           //填充颜色设置
           areaStyle: {
           	color:new echarts.graphic.LinearGradient(
           		0,
           		0,
           		0,
           		1,
           		[
           		{
           			offset:0,
           			color:"rgba(0, 255, 182, 1)"//渐变色的起始颜色
           		},
           		{
           			offset:0.8,
           			color:"rgba(1,132,213,0.1)"//渐变色的结束颜色
           		}
           		],
           		false
           	),
           	shadowColor:"rgba(0,0,0,0.1)"
           },
           //设置拐点
           symbol:'circle',
           //设置拐点大小
           symbolSize:7,
           //开始不显示拐点，鼠标经过再显示
           showSymbol:false,
           //设置拐点颜色以及边框
           itemStyle:{
           	color:"rgba(0, 255, 182, 1)",
           	borderColor:"rgba(221,220,107,0.1)",
           	borderWidth:12
           },
          data: [0.16,0.12,0.09,0.10,0.09,0.14,1.07],
          smooth:true
       },
    ]
};
//把配置项给实例对象
myCharts.setOption(option);

// 圆形echares
function setEchartsPie(id, data) {
    let $el = document.getElementById(id);
    let myChart = this.echarts.init($el, '', {
        width: 450,
        height: 300,
    });
    let dataName = [];
    let total = 0;
    data.forEach((res) => {
        dataName.push(res.name);
        total += parseFloat(res.value) * 10000;
    });
    total = total / 10000;
    let option = {
        title: {
            zlevel: 0,
            text: [
                '{value|' + total + '}',
                '{name|警告总数(次)}',
            ].join('\n'),
            rich: {
                value: {
                    color: '#303133',
                    fontSize: 40,
                    fontWeight: 'bold',
                    lineHeight: 40,
                },
                name: {
                    color: '#909399',
                    lineHeight: 20
                },
            },
            top: 'center',
            left: '145',
            textAlign: 'center',
            textStyle: {
                rich: {
                    value: {
                        color: '#ffffff',
                        fontSize: 40,
                        fontWeight: 'bold',
                        lineHeight: 40,
                    },
                    name: {
                        color: '#ffffff',
                        lineHeight: 20
                    },
                },
            },
        },
        tooltip: { // 悬停指示
            trigger: 'item',
            formatter: "{b}: {c} ({d}%)"
        },
        series: [
            {
                type: 'pie',
                radius: ['68%', '74%'],
                center: [150, '45%'],
                stillShowZeroSum: false,
                avoidLabelOverlap: false,
                zlevel: 1,
                label: {
                    normal: {
                        padding: [30, 30, 30, 30],
                        backgroundColor: '#fff',
                        show: false,
                        position: 'center',
                        formatter: [
                            '{value|￥{c}}',
                            '{name|{b}}'
                        ].join('\n'),
                        rich: {
                            value: {
                                color: '#303133',
                                fontSize: 40,
                                fontWeight: 'bold',
                                lineHeight: 40,
                            },
                            name: {
                                color: '#909399',
                                lineHeight: 20
                            },
                        },
                    },
                    emphasis: {
                        show: false,
                        textStyle: {
                            fontSize: '16',
                            fontWeight: 'bold'
                        }
                    }
                },
                data: data
            }
        ],
        color: ['#6648FF','#16CEB9','#2D99FF']
    };
    myChart.setOption(option);
}
 
setEchartsPie('echart', [
    { value: 100, name: '车辆违规' },
    { value: 120, name: '设备故障' },
    { value: 100, name: '空气质量' }
]);